<script setup lang="ts">
import { getHomeCategoryMutli } from '@/services/home'
import type { categoryItem } from '@/types/home'
import { ref, onMounted } from 'vue'

const categoryList = ref<categoryItem[]>([])
const getCategoryList = async () => {
  const res = await getHomeCategoryMutli({})
  categoryList.value = res.result
}
onMounted(() => {
  getCategoryList()
})
</script>

<template>
  <view class="categoryPanel">
    <Navigator
      url="/pages/index/index"
      hover-class="none"
      v-for="item in categoryList"
      :key="item.id"
      class="category-item"
      ><image class="icon" :src="item.icon"></image
      ><text class="text">{{ item.name }}</text></Navigator
    >
  </view>
</template>

<style lang="scss">
.categoryPanel {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;
  .category-item {
    width: 150rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>